<template>
  <div class="page-mobile-classify">
    <div class="classify-header">
      <div class="head-left" @click="classifyHandle">
        <img class="course-classify" src="/img/mobile/classify.png" alt />
        <img
          class="classify-bottom"
          :class="[isOpenClassify?'active':'']"
          src="/img/mobile/classify-bottom.png"
          alt
        />
      </div>
      <div class="head-right">
        <div class="search" @click="toSearchHandle">
          <input type="search" name="keyword" class="search_input" placeholder="请输入关键词" />
          <img class="search-icon" src="/img/mobile/search.png" alt />
        </div>
      </div>
      <div :class="['menu_cate',isOpenClassify?'active':'']" v-if="false">
        <div class="cate_left">
          <ul>
            <li
              v-for="(item,index) in major_tree"
              :key="index"
              :ref="'fh' + item.id"
              :class="[activeKey == index?'active':'']"
              @click="menuHandle(item.id,index)"
            >{{item.name}}</li>
          </ul>
        </div>
        <div class="cate_right" ref="classify-content">
          <div v-for="(itemOne,indexOne) in major_tree" :key="indexOne" :ref="'cl' + itemOne.id">
            <div
              class="cate_content"
              v-for="(itemTwo,indexTwo) in itemOne.treeNode"
              :key="indexTwo"
            >
              <div class="cate_title" @click="majorClassifyHandle(itemTwo.id,'default')">{{itemTwo.name}}</div>
              <div class="cate_list" v-if="itemTwo.treeNode.length > 0">
                <div
                  :class="['cate_item',majorId == itemThree.id?'active':'']"
                  v-for="(itemThree,indexThree) in itemTwo.treeNode"
                  :key="indexThree"
                   @click="majorClassifyHandle(itemThree.id,'default')"
                >{{itemThree.name}}</div>
              </div>
              <div class="cate_list" v-if="itemTwo.treeNode.length === 0">
                <div :class="['cate_item',majorId == itemTwo.id?'active':'']" @click="majorClassifyHandle(itemTwo.id,'default')">{{itemTwo.name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="['menu_cate',isOpenClassify?'active':'']">
        <div class="cate_left">
          <ul>
            <li
              v-for="(item,index) in major_tree"
              :key="index"
              :class="[menuLeftKey == index?'active':'']"
              @click="menuLeftHandle(item.id,index)"
            >{{item.name}}</li>
          </ul>
        </div>
        <div class="cate_right">
          <div
            class="cate_content"
            v-for="(itemTwo,indexTwo) in menuRightArr"
            :key="indexTwo"
          >
            <div class="cate_title" @click="majorClassifyHandle(itemTwo.id,'default')">{{itemTwo.name}}</div>
            <div class="cate_list" v-if="itemTwo.treeNode.length > 0">
              <div
                :class="['cate_item',majorId == itemThree.id?'active':'']"
                v-for="(itemThree,indexThree) in itemTwo.treeNode"
                :key="indexThree"
                  @click="majorClassifyHandle(itemThree.id,'default')"
              >{{itemThree.name}}</div>
            </div>
            <div class="cate_list" v-if="itemTwo.treeNode.length === 0">
              <div :class="['cate_item',majorId == itemTwo.id?'active':'']" @click="majorClassifyHandle(itemTwo.id,'default')">{{itemTwo.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search_dialog" :class="[show?'active':'']">
      <div class="search_header">
        <input
          type="search"
          @keyup.enter="onSearch"
          name="keyword"
          v-model="keyword"
          id="search_input"
          class="search_input"
          placeholder="请输入关键词"
        />
        <img class="search-icon" src="/img/mobile/search.png" alt />
        <van-icon
          class="search_clear"
          v-if="keyword && keyword != ''"
          size=".4rem"
          name="clear"
          @click="clearSearchHandle"
        />
        <div class="search_cancel" @click="onCancel">取消</div>
      </div>
      <div :class="['search_content',isOpenSearch?'active':'']">
        <!-- <div class="hot_keyword">
          <div class="hot_title"><van-icon name="fire-o"  style="margin-right:.1rem;"/>热门搜索</div>
          <ul class="hot_list">
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
            <li>关键词</li>
          </ul>
        </div>-->
        <div class="history_keyword">
          <div class="history_title">
            <div class="t-l">
              <van-icon name="clock-o" style="margin-right:.1rem;" />最近搜索
            </div>
            <div class="t-r" @click="clearHistory">清空搜索记录</div>
          </div>
          <ul class="history_list">
            <li
              v-for="(item, index) in search_history_list"
              :key="index"
              @click="clickHistory(item)"
            >{{ item }}</li>
          </ul>
          <van-empty
            :description="$t('locale.mobile.classify.t7')"
			:image="require('@/static/img/mobile/empty-image-default.png')"
            v-show="search_history_list.length == 0"
          />
        </div>
      </div>
    </div>
    <div class="select-action">
      <van-dropdown-menu class="select-menu">
        <van-dropdown-item
          v-model="search_form.recommend"
          :options="recommend_list"
          @change="handleFilter()"
        />
        <van-dropdown-item
          @change="handleFilter()"
          v-model="search_form.type"
          :options="course_type_list"
        />
        <van-dropdown-item
          @change="handleFilter()"
          v-model="search_form.price"
          :options="price_list"
        />
      </van-dropdown-menu>
    </div>
    <!-- 搜索课程 -->
    <div class="course_container" v-show="!classify_status">
      <course-card
        v-for="(item, index) in course_filter_list"
        :detail="item"
        :major="getMajorName(item.majorId)"
        :is_member="is_member"
        :user_member="user_member"
        :memberDiscount="memberDiscount"
        :key="index"
        v-show="course_filter_list.length > 0"
      ></course-card>
      <div class="footer" v-if="course_filter_list.length != 0">
        <span class="tips">我是有底线的</span>
      </div>
      <van-empty :description="$t('locale.mobile.classify.t7')" v-show="course_filter_list.length == 0" />
    </div>
    <!-- 默认课程 -->
    <div class="course_container" v-show="classify_status" ref="default-container">
      <course-card
        v-for="(item, index) in course_filter_list"
        :detail="item"
        :is_member="is_member"
        :user_member="user_member"
        :memberDiscount="memberDiscount"
        :key="index"
        :bottomInline="index != (course_filter_list.length - 1)"
        v-show="course_filter_list.length > 0"
      ></course-card>
      <van-empty
        :description="$t('locale.mobile.classify.t7')"
        v-show="course_filter_list.length == 0"
      />
      <div
        class="footer"
        v-if="course_filter_list.length != 0"
      >
        <span class="tips">我是有底线的</span>
      </div>
    </div>
    <div :class="['bg_shadow',isOpenClassify || show?'active':'']"></div>
  </div>
</template>

<script>
import { getMajorTree } from "~/api/major";
import { getCourse,getCourseByMajor,getMajorTreeCourse } from "~/api/course";
import { mapState, mapActions, mapMutations } from "vuex";
import { scroll } from "~/utils/commonfun";
import CourseCard from "~/components/mobile/CourseCard.vue";
import { getMemberInfo, getMember } from "~/api/member";
const defaultSearchForm = {
  recommend: "",
  major: "",
  type: "",
  price: "",
};
export default {
  components: {
    CourseCard,
  },
  data() {
    return {
      majorId:null,
      course_filter_list:[],
      classify_status: false,
      course_classify_list: [],
      classify_pagination: {
        pageSize: 10,
        page: 1,
        total: 0,
      },
      major_pagination: {
        pageSize: 10,
        page: 1,
        total: 0,
      },
      memberDiscount: {}, //会员折扣
      isOpenClassify: false, //是否打开分类窗口
      isOpenSearch: false, //是否打开搜索窗口
      keyword: "",
      activeKey: 0,
      menuLeftKey: 0,
      menuLeftId: 0,
      menuRightArr: [],
      show: false,
      major_tree: [],
      currentPage: 1,
      offset_height_list: {},
      header_height: 0,
      course_list: [], //搜索的课程
      search_form: {
        recommend: "",
        major: "",
        type: "",
        price: "",
      },
      recommend_list: [
        {
          text: this.$t("locale.mobile.course.recommendList.t1"),
          value: "",
        },
      ],
      course_type_list: [
        {
          text: this.$t("locale.mobile.course.courseTypeList.t1"),
          value: "",
        },
        {
          text: this.$t("locale.mobile.course.courseTypeList.t2"),
          value: "1",
        },
        {
          text: this.$t("locale.mobile.course.courseTypeList.t3"),
          value: "2",
        },
      ],
      price_list: [
        {
          text: this.$t("locale.mobile.course.priceList.t1"),
          value: "",
        },
        {
          text: this.$t("locale.mobile.course.priceList.t2"),
          value: "desc",
        },
        {
          text: this.$t("locale.mobile.course.priceList.t3"),
          value: "asc",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      search_history_list(state) {
        return state.search_history_list;
      },
      major_list(state) {
        return state.major_list;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
    }),
    action() {
      return this.$route.query.action;
    },
  },
  watch: {},
  deactivated() {
    this.keyword = "";
    // this.$refs["classify-content"].removeEventListener("scroll", this.throttle);
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  activated() {
    // this.$refs["classify-content"].addEventListener(
    //   "scroll",
    //   this.throttle(this.setActive, 16)
    // );
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
    this.classify_pagination = {
      pageSize: 10,
      page: 1,
      total: 0,
    }
    this.getClassifyCourse();
    this.isOpenClassify = false;
  },
  beforeDestroy() {
    this.keyword = "";
    // this.$refs["classify-content"].removeEventListener("scroll", this.throttle);
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  methods: {
    ...mapActions(["initMajorList", "initMember"]),
    ...mapMutations([
      "SET_IS_LOADING",
      "INIT_SEARCH_HISTORY",
      "SET_SEARCH_HISTORY",
      "CLEAR_SEARCH_HISTORY",
    ]),
    async majorClassifyHandle(majorId,fetch_type){
      if(fetch_type != "pullup"){
        if (process.client) {
          window.removeEventListener("scroll", this.eventListener);
          window.addEventListener("scroll", this.eventListener);
        }
        this.major_pagination = {
          pageSize: 10,
          page: 1,
          total: 0,
        }
        this.show = false;
        this.isOpenClassify = false;
        
        this.course_list = [];
      }
      this.classify_status = false;
      console.log(majorId);
      this.majorId = majorId;
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.major_pagination.pageSize * (this.major_pagination.page - 1),
        limit: this.major_pagination.pageSize,
        sort: "id desc",
        majorId: this.majorId
      };
      // let result = await getCourseByMajor(params);
      let result = await getMajorTreeCourse(params);
      if (result && result.data && result.data.code == 200) {
        //上拉加载
        // if (fetch_type == "pullup") {
        //   this.course_list = [...this.course_list, ...result.data.data.rows];
        // } else {
        //   this.course_list = result.data.data.rows;
        // }
        // 加一层折扣时间的判断,不在折扣时间内判定为不是折扣课程
        let courseArr = [];
        if (fetch_type == "pullup") {
          courseArr = [...this.course_list,...result.data.data.rows];
        }else{
          courseArr = result.data.data.rows;
        }
        this.course_list = courseArr.map(item=>{
          let currentTime = new Date().getTime();
          if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
            return {
              ...item,
              isDiscount:0
            };
          }else{
            return item;
          }
        });
        this.handleFilter();
        this.major_pagination.total = result.data.data.total;
      } else {
        this.$toast(result.data.msg);
      }
      this.SET_IS_LOADING(false);
    },
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      // console.log("=============执行1");
      if (this.user_info && Object.keys(this.user_info).length > 0) {
        // console.log("=============执行2");
        let result = await getMemberInfo(this.user_info.id);
        if (
          result &&
          result.data &&
          result.data.code == 200
        ) {
          this.memberDiscount = result.data.data;
        } else {
          
        }
      } else {
        this.memberDiscount = {};
      }

      this.SET_IS_LOADING(false);
    },
    clearSearchHandle() {
      this.keyword = "";
    },
    toSearchHandle() {
      this.keyword = "";
      this.show = true;
      this.isOpenSearch = true;
      this.isOpenClassify = false;
    },
    onSearch() {
      // console.log("搜索");
      this.getClassFun();
      this.show = false;
      this.majorId = null;
      this.isOpenSearch = false;
      this.classify_status = false;
      if (process.client) {
        window.removeEventListener("scroll", this.eventListener);
      }
      this.search_form = Object.assign({}, defaultSearchForm);
    },
    onCancel() {
      this.keyword = "";
      // this.course_list = [];
      // if (this.action == "search") {
      //   this.$router.back();
      // }
      this.show = false;
      this.isOpenSearch = false;
    },
    // 新分类菜单
    menuLeftHandle(id, index){
      this.menuLeftKey = index;
      let menuList = this.major_tree.filter((item)=>{
        return id == item.id
      })
      if(menuList.length > 0){
        this.menuRightArr = menuList[0].treeNode;
      }
    },
    // 旧分类菜单
    menuHandle(id, index) {
      this.activeKey = index;
      let target = this.$refs["cl" + id];
      let scroll_target = this.$refs["classify-content"];
      if (target && target.length > 0) {
        let top_far = target[0].offsetTop;
        scroll(top_far + 3, scroll_target);
      }
    },
    clearHistory() {
      this.CLEAR_SEARCH_HISTORY();
    },
    clickHistory(val) {
      this.classify_status = false;
      if (process.client) {
        window.removeEventListener("scroll", this.eventListener);
      }
      this.search_form = Object.assign({}, defaultSearchForm);
      this.show = false;
      this.isOpenSearch = false;
      this.majorId = null;
      this.keyword = val;
      this.getClassFun();
    },
    getMajorName(id) {
      let res = this.major_list.filter((i) => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.mobile.classify.t10");
      }
    },
    async getClassFun() {
      this.SET_IS_LOADING(true);
      let result = await getCourse({
        keyword: this.keyword,
      });
      if (result && result.data && result.data.code == 200) {
        if (process.client) {
          this.SET_SEARCH_HISTORY(this.keyword);
        }
        // this.course_list = result.data.data.rows;
        this.course_list = result.data.data.rows.map(item=>{
          let currentTime = new Date().getTime();
          if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
            return {
              ...item,
              isDiscount:0
            };
          }else{
            return item;
          }
        });
        this.handleFilter();
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(
          (result && result.data && result.data.msg) ||
            this.$t("locale.mobile.classify.t9")
        );
      }
    },
    async getClassifyCourse(fetch_type) {
      this.SET_IS_LOADING(true);
      let params = {
        offset:
          this.classify_pagination.pageSize *
          (this.classify_pagination.page - 1),
        limit: this.classify_pagination.pageSize,
        sort: "id",
        sortType: "desc",
        isUse:1,
      };
      let result = await getCourse(params);
      if (result && result.data && result.data.code == 200) {
        // if (fetch_type == "pullup") {
        //   this.course_classify_list = [
        //     ...this.course_classify_list,
        //     ...result.data.data.rows,
        //   ];
        // } else {
        //   this.course_classify_list = result.data.data.rows;
        // }
        // 加一层折扣时间的判断,不在折扣时间内判定为不是折扣课程
        let courseArr = [];
        if (fetch_type == "pullup") {
          courseArr = [...this.course_classify_list,...result.data.data.rows];
        }else{
          courseArr = result.data.data.rows;
        }
        this.course_classify_list = courseArr.map(item=>{
          let currentTime = new Date().getTime();
          if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
            return {
              ...item,
              isDiscount:0
            };
          }else{
            return item;
          }
        });
        this.classify_pagination.total = result.data.data.total;
        this.classify_status = true;
        this.handleFilter();
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(
          (result && result.data && result.data.msg) ||
            this.$t("locale.mobile.classify.t9")
        );
      }
    },
    eventListener() {
      this.throttleTwo(this.pullUp, 300);
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      // console.log(scrollTop + "+" + clientHeight + ">=" + scrollHeight);
      //适配处理:-120的是距离底部120px触发上拉加载，而不是触底加载
      // console.log("上拉加载1");
      if (scrollTop + clientHeight >= scrollHeight - 120) {
        if(this.majorId){
          if (
            this.major_pagination.total <= this.course_list.length
          ) {
            return;
          }
        }else{
          if (
            this.classify_pagination.total <= this.course_classify_list.length
          ) {
            return;
          }
        }
        
        if (this.is_loading) {
          return;
        }
        if(this.majorId){
          this.major_pagination.page++;
          this.majorClassifyHandle(this.majorId,"pullup")
        }else{
          this.classify_pagination.page++;
          this.getClassifyCourse("pullup");
        }
        // console.log("上拉加载2");
      }
    },
    handleFilter() {
      let arr = [];
      let newArr = [];
      if (this.classify_status) {
        arr = JSON.parse(JSON.stringify(this.course_classify_list));
      } else {
        arr = JSON.parse(JSON.stringify(this.course_list));
      }
      if (this.search_form.type == "") {
        if (this.search_form.price == "") {
          newArr = arr;
        } else if (this.search_form.price == "desc") {
          newArr = arr.sort(function (a, b) {
            return a.price - b.price;
          });
        } else if (this.search_form.price == "asc") {
          newArr = arr.sort(function (a, b) {
            return b.price - a.price;
          });
        }
      } else if (this.search_form.type == 1) {
        if (this.search_form.price == "") {
          newArr = arr.filter((i) => i.isLive == 0);
        } else if (this.search_form.price == "desc") {
          newArr = arr
            .filter((i) => i.isLive == 0)
            .sort(function (a, b) {
              return a.price - b.price;
            });
        } else if (this.search_form.price == "asc") {
          newArr = arr
            .filter((i) => i.isLive == 0)
            .sort(function (a, b) {
              return b.price - a.price;
            });
        }
      } else if (this.search_form.type == 2) {
        if (this.search_form.price == "") {
          newArr = arr.filter((i) => i.isLive == 1);
        } else if (this.search_form.price == "desc") {
          newArr = arr
            .filter((i) => i.isLive == 1)
            .sort(function (a, b) {
              return a.price - b.price;
            });
        } else if (this.search_form.price == "asc") {
          newArr = arr
            .filter((i) => i.isLive == 1)
            .sort(function (a, b) {
              return b.price - a.price;
            });
        }
      }
      this.course_filter_list = newArr;
      return newArr;
    },
    classifyHandle() {
      this.isOpenClassify = !this.isOpenClassify;
      this.show = false;
      this.isOpenSearch = false;
    },
    async getData() {
      return new Promise(async (res, rej) => {
        this.SET_IS_LOADING(true);
        let result = await getMajorTree();
        if (result && result.data && result.data.code == 200) {
          this.major_tree = result.data.data;
          this.menuRightArr = this.major_tree[0] ? this.major_tree[0].treeNode : [];
          this.SET_IS_LOADING(false);
        } else {
          this.SET_IS_LOADING(false);
          this.$toast(
            (result && result.data && result.data.msg) ||
              this.$t("locale.mobile.classify.t8")
          );
        }
        res();
      }).then();
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      };
    },
    throttleTwo(fn, delay) {
      let lastTime = 0;
      return !(function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    setActive() {
      let current_top = this.$refs["classify-content"].scrollTop;
      let offset_list = Object.entries(this.offset_height_list);
      for (let _i = 0; _i < offset_list.length; _i++) {
        //active第一项的取值范围
        if (_i == 0) {
          if (current_top < offset_list[_i + 1][1]) {
            this.activeKey = _i;
          }
          //active非第一项、非最后一项的取值范围
        } else if (_i < offset_list.length - 1 && _i > 0) {
          if (
            current_top >= offset_list[_i][1] &&
            current_top < offset_list[_i + 1][1]
          ) {
            this.activeKey = _i;
          }
          //active最后一项的取值范围
        } else if (_i == offset_list.length - 1) {
          if (current_top >= offset_list[_i][1]) {
            this.activeKey = _i;
          }
        }
      }
    },
  },
  created() {
    this.getData().then(() => {
      this.$nextTick(() => {
        if (process.client) {
          Object.keys(this.$refs).map((i, x) => {
            if (this.$refs[i][0] !== undefined && /cl/.test(i)) {
              let origin_offset_height = this.$refs[i][0].offsetTop;
              this.offset_height_list = {
                ...this.offset_height_list,
                [i]: Math.ceil(origin_offset_height),
              };
            }
          });
        }
      });
    });
    this.initMajorList();
    this.initMember();
    this.getMemberInfo();
    this.getClassifyCourse();
  },
  mounted() {
    if (process.client) {
      // this.$refs["classify-content"].addEventListener(
      //   "scroll",
      //   this.throttle(this.setActive, 16)
      // );
    }
  },
};
</script>

<style lang="scss" scoped>
.page-mobile-classify {
}
</style>
<style lang="scss">
.page-mobile-classify {
  .van-dropdown-menu .van-dropdown-menu__title .van-ellipsis {
      font-size: .2496rem;
      font-weight: bold;
  }
  .classify-header {
    position: fixed;
    background: #ffffff;
    top: 0;
    left: 0;
    z-index: 1100;

    display: flex;
    align-items: center;
    // border-bottom: 1px solid #000;
    .head-left {
      background: #ffffff;
      width: 2.2rem;
      height: 0.8rem;
      padding: 0.2rem 0.05rem 0.2rem 0.15rem;
      box-sizing: border-box;
      .course-classify {
        width: 1.6rem;
        height: 0.36rem;
        vertical-align: middle;
      }
      .classify-bottom {
        width: 0.222rem;
        height: 0.125rem;
        vertical-align: middle;
        transition: transform 0.2s;
        -moz-transition: transform 0.2s; /* Firefox 4 */
        -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
        -o-transition: transform 0.2s; /* Opera */
      }
      .classify-bottom.active {
        transform: rotateZ(180deg);
      }
    }
    .head-right {
      width: 5rem;
      height: 0.8rem;
      background: #ffffff;
      .search {
        background: #ffffff;
        width: 4.6rem;
        margin: 0 auto;
        height: 0.8rem;
        padding: 0.1rem 0.1rem;
        box-sizing: border-box;
        position: relative;
        .search_input {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
          padding-left: 0.6rem;
          padding-right: 0.2rem;
          font-size: 0.26rem;
          line-height: .26rem;
          background-color: #f5f6f7;
          border: none;
          pointer-events: none;
        }
        .search-icon {
          display: block;
          width: 0.26rem;
          height: 0.26rem;
          // width: 0.36rem;
          // height: 0.36rem;
          position: absolute;
          left: 0.35rem;
          transform: translateY(-50%);
          top: 50%;
        }
      }
    }
    .menu_cate {
      position: absolute;
      border-top: 1px solid #f7f8fa;
      border-bottom: 1px solid #f7f8fa;
      left: 0;
      top: 0.8rem;
      width: 100%;
      height: 61vh;
      background: #fff;
      display: flex;
      -webkit-transition: -webkit-transform 0.2s ease;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      -webkit-transform: translate3d(0, -250%, 0);
      transform: translate3d(0, -250%, 0);
      z-index: -1;
      .cate_left {
        width: 30%;
        height: 61vh;
        background-color: #f7f8fa;
        ul {
          width: 100%;
          height: 61vh;
          overflow-y: scroll;
          li {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.3rem;
            font-weight: bold;
          }
          li.active {
            background: #ffffff;
            color: var(--theme-color);
            position: relative;
            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 0.05rem;
              height: 0.4rem;
              display: block;
              background: var(--theme-color);
            }
          }
        }
      }
      .cate_right {
        width: 70%;
        height: 61vh;
        background-color: #ffffff;
        padding: 0.2rem;
        box-sizing: border-box;
        overflow-y: scroll;
        .cate_content {
          .cate_title {
            padding: 0.2rem 0.1rem;
            // font-size: .26rem;
            font-size: 0.3rem;
            color: #313233;
            font-weight: bold;
          }
          .cate_list {
            display: flex;
            flex-wrap: wrap;
            .cate_item {
              background-color: #f7f8fa;
              padding: 0.1rem 0.2rem;
              margin-right: 0.2rem;
              margin-bottom: 0.2rem;
            }
            .cate_item.active{
              color: var(--theme-color);
              background: #EBF2FF
            }
          }
        }
      }
    }
    .menu_cate.active {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
  .search_dialog {
    position: fixed;
    background: #ffffff;
    top: 0;
    left: 0;
    z-index: 1101;
    width: 100%;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    .search_header {
      width: 100%;
      height: 0.8rem;
      position: relative;
      padding: 0.1rem 0.3rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background: #ffffff;
      .search_input {
        width: 80%;
        height: 100%;
        border-radius: 0.5rem;
        padding-left: 0.6rem;
        padding-right: 0.5rem;
        background-color: #f5f6f7;
        font-size: 0.26rem;
        line-height: .26rem;
        border: none;
      }
      .search-icon {
        display: block;
        width: 0.26rem;
        height: 0.26rem;
        // width: 0.36rem;
        // height: 0.36rem;
        position: absolute;
        left: 0.55rem;
        transform: translateY(-50%);
        top: 50%;
      }
      .search_clear {
        position: absolute;
        right: 1.74rem;
        transform: translateY(-50%);
        top: 50%;
      }
      .search_cancel {
        color: var(--theme-color);
        font-size: 0.3rem;
        padding: 0.1rem 0.2rem;
        margin-left: 0.2rem;
        // color: #ffffff;
        // background: var(--theme-color);
      }
    }
    .search_content {
      position: absolute;
      border-top: 1px solid #f7f8fa;
      border-bottom: 1px solid #f7f8fa;
      left: 0;
      top: 0.8rem;
      width: 100%;
      min-height: 40vh;
      box-sizing: border-box;
      padding: 0.2rem;
      // display: flex;
      background: #ffffff;
      -webkit-transition: -webkit-transform 0.2s ease;
      transition: -webkit-transform 0.2s ease;
      transition: transform 0.2s ease;
      transition: transform 0.2s ease, -webkit-transform 0.2s ease;
      -webkit-transform: translate3d(0, -250%, 0);
      transform: translate3d(0, -250%, 0);
      z-index: -1;
      .hot_keyword {
        margin-bottom: 0.2rem;
        .hot_title {
          display: flex;
          align-items: center;
          color: #909090;
          font-size: 0.3rem;
        }
        .hot_list {
          display: flex;
          font-size: 0.26rem;
          margin-top: 0.1rem;
          flex-wrap: wrap;
          li {
            padding: 0.1rem 0.2rem;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            border: 1px solid #ddd;
            border-radius: 0.3rem;
          }
        }
      }
      .history_keyword {
        .history_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #909090;
          font-size: 0.3rem;
          margin-bottom: 0.2rem;
          .t-l {
            display: flex;
            align-items: center;
          }
          .t-r {
            color: var(--theme-color);
          }
        }
        .history_list {
          display: flex;
          font-size: 0.26rem;
          margin-top: 0.1rem;
          flex-wrap: wrap;
          li {
            padding: 0.1rem 0.2rem;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            border: 1px solid #ddd;
            border-radius: 0.3rem;
          }
        }
      }
    }
    .search_content.active {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
  .search_dialog.active {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .select-action {
    height: 0.8rem;
    .select-menu {
      position: fixed;
      top: 0.8rem;
      left: 0;
      width: 100%;
      z-index: 9;
    }
  }
  .course_container {
    margin: 0.8rem 0 0;
    width: 6.8rem;
    .footer {
      padding: 0.3rem;
      font-size: 0.26rem;
      color: #babec2;
      text-align: center;
      .tips {
        position: relative;
      }
      .tips::before {
        content: "";
        display: block;
        position: absolute;
        left: -1.7rem;
        top: 50%;
        transform: translateY(-1px);
        width: 1.5rem;
        height: 1px;
        background: #babec2;
      }
      .tips::after {
        content: "";
        display: block;
        position: absolute;
        right: -1.7rem;
        top: 50%;
        width: 1.5rem;
        transform: translateY(-1px);
        height: 1px;
        background: #babec2;
      }
    }
  }
  .bg_shadow {
    position: fixed;
    left: 0;
    top: 0.8rem;
    width: 100%;
    height: calc(100vh - 1.6rem);
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
    display: none;
  }
  .bg_shadow.active {
    display: block;
  }
}
</style>
